<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="8">
          <NewCard title="用户基本信息">
            <div class="leftMenu">
              <div class="leftSearch">
                <el-popover placement="bottom" width="160">
                  <el-input
                    v-model="filterText"
                    size="mini"
                    clearable
                    placeholder="输入手机号搜索"
                  />
                  <el-button
                    slot="reference"
                    icon="el-icon-search"
                    circle
                  ></el-button>
                </el-popover>
              </div>
              <el-descriptions
                column="2"
                direction="vertical"
                border="true"
                size="medium"
              >
                <el-descriptions-item label="姓名">张三</el-descriptions-item>
                <el-descriptions-item label="手机号"
                  >18100000000</el-descriptions-item
                >
                <el-descriptions-item label="银行凭证号">
                  <el-input placeholder="银行凭证号"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="汇款银行">
                  <el-input placeholder="汇款银行"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="收款账号">
                  <el-input placeholder="收款账号"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="收款银行">
                  <el-input placeholder="收款银行"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="充值金额">
                  <el-input placeholder="充值金额"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="问金">
                  <el-input placeholder="问金"></el-input>
                </el-descriptions-item>
              </el-descriptions>
              <el-button
                type="primary"
                class="rechInvoiceBtn"
                :disabled="repetHlight"
                >确认</el-button
              >
            </div>
          </NewCard>
        </el-col>
        <el-col :span="16">
          <NewCard title="赋值记录">
            <div class="assignRecord">
              <el-table :data="rechInvoiceRecord" border style="width: 100%">
                <el-table-column prop="date" label="日期"> </el-table-column>
                <el-table-column prop="voucherNum" label="银行凭证号">
                  <template scope="scope">
                    <span>{{ scope.row.voucherNum }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="remitBank" label="汇款银行">
                </el-table-column>
                <el-table-column prop="remitAccount" label="汇款账号">
                </el-table-column>
                <el-table-column prop="dueBank" label="收款银行">
                </el-table-column>
                <el-table-column prop="Money" label="金额"> </el-table-column>
                <el-table-column prop="askMoney" label="问金">
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px; text-align: center">
                <el-pagination
                  :current-page="1"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20"
                >
                </el-pagination>
              </div>
            </div>
            <span v-show="this.repetHlight" class="repetHlight"
              >银行凭证号与赋值记录中的银行凭证号重复</span
            >
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import { getUserAssignListApi } from "@/wss/newApi_3-24/financial/userAssign.js";
import NewCard from "../../../components/newCard.vue";
export default {
  name: "useRassign",
  components: { NewCard },
  data() {
    return {
      //用户列表 搜索值
      filterText: "",
      //用户列表数据
      userList: [
        {
          index: 1,
          name: "张三",
          cellNumber: "13800000000",
          date: "2022-04-13",
        },
        {
          index: 2,
          name: "李四",
          cellNumber: "13810000000",
          date: "2022-04-12",
        },
        {
          index: 3,
          name: "王五",
          cellNumber: "13820000000",
          date: "2022-04-16",
        },
        {
          index: 4,
          name: "赵六",
          cellNumber: "13830000000",
          date: "2022-04-14",
        },
        {
          index: 5,
          name: "张七",
          cellNumber: "13840000000",
          date: "2022-04-19",
        },
      ],
      //用户列表菜单高亮
      highlight: true,
      //赋值 数据
      rechInvoice: [
        {
          date: "2022-04-19",
          voucherNum: "fp00000004",
          remitBank: "工商银行",
          remitAccount: "3000000000000000000",
          dueBank: "农商银行",
          Money: 1000,
          askMoney: 1200,
          assignment: 1200,
        },
      ],
      //数据重复
      repetHlight: false,

      //赋值记录 数据
      rechInvoiceRecord: [
        {
          date: "2022-04-15",
          voucherNum: "fp00000001",
          remitBank: "工商银行",
          remitAccount: "3000000000000000000",
          dueBank: "农商银行",
          Money: 1000,
          askMoney: 1200,
          assignment: 1200,
        },
        {
          date: "2022-04-16",
          voucherNum: "fp00000002",
          remitBank: "工商银行",
          remitAccount: "3000000000000000000",
          dueBank: "农商银行",
          Money: 1000,
          askMoney: 1200,
          assignment: 1200,
        },
        {
          date: "2022-04-17",
          voucherNum: "fp00000003",
          remitBank: "工商银行",
          remitAccount: "3000000000000000000",
          dueBank: "农商银行",
          Money: 1000,
          askMoney: 1200,
          assignment: 1200,
        },
      ],
    };
  },
  computed: {
    //左侧用户列表
    flist() {
      return this.userList.filter((item) =>
        JSON.stringify(item).includes(this.filterText)
      );
    },
  },
  mounted() {
    this.getUserAssignListFn();
  },
  methods: {
    async getUserAssignListFn() {
      let res = await getUserAssignListApi();
      console.log(res);
    },
    //数据重复提示
    hligVoucherNum() {
      let vouNum = this.rechInvoice[0].voucherNum;
      this.rechInvoiceRecord.forEach((item) => {
        if (item.voucherNum === vouNum) {
          this.repetHlight = true;
        }
      });
    },
  },
  mounted() {
    //数据重复提示 使用
    this.hligVoucherNum();
  },
};
</script>

<style scoped>
.el-row {
  height: 100%;
}
.label-box-content {
  height: 100%;
}
.label-box-content >>> .top::after {
  height: 1px;
}
.el-card {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
.el-card >>> .top h1 {
  margin: 20px 0 15px 0;
}
/* 左侧用户个人信息 */

.leftMenu .leftSearch {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}
.leftSearch > .el-button {
  padding: 7px 10px;
  margin-left: 0;
}
.leftSearch > span {
  margin-left: 10px;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #1890ff;
  color: #fff;
}
.leftMenu >>> .el-descriptions-item__label.is-bordered-label {
  color: #515a6e;
  font-size: 13px;
}
.leftMenu .el-input {
  width: 90%;
}
/* 右侧赋值 */
.assignRecord {
}
.assignRecord h2 {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
}

.repetHlight {
  color: #f56c6c;
  font-size: 15px;
}
.rechInvoiceBtn {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  border-radius: 0;
  padding: 15px 20px;
}
</style>